<script setup lang="ts">
import { ref } from 'vue'

const money = ref(100)
const num=(aa:number)=>{
  money.value-=aa
}
</script>


<template>
  <div id="app">
    <div class="box">
      <h3>黑马自动售货机</h3>
      <button @click="num(3)">可乐3元</button>
      <button v-on:click="num(5)">牛奶5元</button>
      <button @click="money-=10">咖啡10元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>
</template>

<style>
.box {
  border: 3px solid #000000;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  width: 200px;
}

h3 {
  margin: 10px 0 20px 0;
}

p {
  margin: 20px;
}
</style>
